<template>

      <div style="text-align: right">
        <a-button type="primary" @click="onEdit(null)">
          新增
        </a-button>
      </div>
      <a-table
          :columns="columns"
          :data-source="dataSource"
          :pagination="pagination"
          @change="handleTableChange"
      >
        <template #bodyCell="{ column, text ,index}">
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="link" @click="onEdit(index)">编辑</a-button>
            <a-button type="link" danger @click="deleteQuestion(index)">删除</a-button>
          </template>
        </template>
      </a-table>

  <a-modal v-model:visible="editTypeVisible" title="新增" @ok="doEdit" @cancel="handleCancel">
    <a-form
        :model="type"
        name="register"
        class="login-form"
    >
      <a-form-item
          label="英文标签"
          name="phone"
      >
        <a-input v-model:value="type.code"></a-input>
      </a-form-item>
      <a-form-item
          label="类型名称"
          name="code"
      >
        <a-input v-model:value="type.name"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { usePagination } from 'vue-request';
import {computed, defineComponent, onMounted, reactive, ref} from 'vue';
import axios from 'axios';
import {isReturnTrue} from "@/util/util";
import router from "@/router";


export default defineComponent({
  setup() {
    const removeSelectedType=(name)=>{
      let index=0;
      const r=ref([]);
      for (let i = 0; i < selectedType.value.length; i++) {
        if(name!=selectedType.value[i].name){
          // selectedType.value.splice(i,1)
          // index=i;
          r.value.push(selectedType.value[i])
          console.log(i)
        }
      }
      selectedType=r
      // for (let i = 0; i < selectedType.length; i++) {
      //
      // }
      console.log(selectedType.value)
    }
    const types=ref([{
      name:'',
      code:''
    }])
    let selectedType=ref([])
    const changeType = val => {
      if(selectedType.value.length>0){
        for(let i = 0; i < selectedType.value.length; i++){
          if(selectedType.value[i].code===val){
            selectedType.value.splice(i,1)
            return;
          }
        }
      }
      for (let e of types.value) {
        if(e.code===val){
          console.log(e.name)
          selectedType.value.push({
            code:e.code,
            name:e.name,
            id:e.id
          })
        }
      }
      console.log(selectedType.value);
    };
    const onEdit=(index)=>{
      if(index!=null){
        type.code=dataSource.value[index].code
        type.name=dataSource.value[index].name
        type.id=dataSource.value[index].id
      }
      editTypeVisible.value=true;
    }
    const doEdit=()=>{
      axios.post("/core/t-question-type/add",type).then((response)=>{
        if(isReturnTrue(response.data.code)){
          alert("操作成功");
          handleCancel();
          queryData({
            pageSize:10,
            pageNo:1
          })        }
        else{
          alert(response.data.message);
        }
      })
    }
    const handleCancel=()=>{
      editTypeVisible.value=false;
      type.code=''
      type.name=''
      type.id=''
    }
    const type=reactive({
      id:'',
      code:'',
      name:''
    })
    const columns = [{
      title: '题目标记',
      dataIndex: 'code',
      sorter: true,
      width: 'auto',
    }, {
      title: '题目类型',
      dataIndex: 'name',
      width: 'auto',
    },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 'auto'
      }
    ];
    const queryData = params => {
      let _datasource=dataSource
      axios.post("/core/t-question-type/page",
          params,
      ).then((response)=>{
        if(isReturnTrue(response.data.code)){
          console.log("分页成功");
          _datasource.value=response.data.data.records;
          pagination.value.pageSize=response.data.data.size;
          pagination.value.current=response.data.data.current;
          pagination.value.total=response.data.data.total
          return response.data.records;
        }
        else{
          alert(response.data.message);
        }
      });
    };
    const editTypeVisible=ref(false);
    // const {
    //   data: dataSource,
    //   run,
    //   loading,
    //   current,
    //   pageSize,
    // } = usePagination(queryData, {
    //     currentKey: 'pageNo',
    //     pageSizeKey: 'pageSize',
    //   },
    // );
    const dataSource=ref([{
      id:'',
      name:'',
      code:''
    }])
    // const dataSource=[{
    //   title:'',
    //   solutionNum:'',
    //   difficulty:'',
    //   acRate:'',
    //   payOnly:''
    // }]
    const pagination = ref({
      total: 10,
      current: 1,
      pageSize: 10,
    });
    const handleTableChange = (pag, filters, sorter) => {
      queryData({
        pageSize:pag.pageSize,
        pageNo:pag.current
      })
      console.log("页切换")
    };
    const activeKey = ref(1);
    const callback = val => {
      console.log(val);
    };
    const getQuestionInfo=(index)=>{
      console.log("点击题目跳转")
      router.push('/manager/questionInfo/'+dataSource.value[index].titleSlug);
    };
    const editQuestion=(index)=>{
      getQuestionInfo(index)
    };
    const deleteQuestion=(index)=>{
      axios.delete("/core/t-question/"+dataSource.value[index].titleSlug).then((response)=>{
        if(isReturnTrue(response.data.code)){
          alert("删除成功");
          queryData({
            pageSize:10,
            pageNo:1
          });
        }
        else{
          alert(response.data.message);
        }
      })
    };
    const getAllTypes=()=>{
      axios.get("/core/t-question-type/all").then((response)=>{
        if(isReturnTrue(response.data.code)){
          types.value=response.data.data
        }
        else{
          alert(response.data.message)
        }
      })
    }
    const mode = ref('top');

    onMounted(()=>{
      queryData({
        pageSize:10,
        pageNo:1
      })
      getAllTypes()
    });
    return {
      mode,
      removeSelectedType,
      types,
      getAllTypes,
      changeType,
      selectedType,
      callback,
      doEdit,
      onEdit,
      handleCancel,
      editTypeVisible,
      activeKey,
      dataSource,
      pagination,
      // loading,
      columns,
      handleTableChange,
      queryData,
      getQuestionInfo,
      editQuestion,
      deleteQuestion,
      type


    };
  },
});
</script>
<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: absolute;
  left: 15%;
  top: 3%;
}
.left-section {
  flex: 1;
  flex-basis: 50%;
  padding: 20px;
}
.right-section{
  position: absolute;
  top: 100px;
  flex: 0 0 300px;
  left: 100%;
}
.elevated-box {
  position: sticky;
  top: 0;
  width: 300px;
  height: 500px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}
</style>